<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>权限菜单展示</title>
</head>
<body>

<button onclick="fetchData()">点击加载菜单</button>
<ul id="result"></ul>

<script>
    function createMenuItems(items) {
        const fragment = document.createDocumentFragment();

        items.forEach(item => {
            const li = document.createElement("li");
            const a = document.createElement("a");
            a.href = item.permissionUrl || "javascript:void(0)";
            a.textContent = item.permissionName;

            li.appendChild(a);

            // 如果有 childrenList，递归生成子菜单
            if (item.childrenList && item.childrenList.length > 0) {
                const subUl = document.createElement("ul");
                const subItems = createMenuItems(item.childrenList);
                subUl.appendChild(subItems);
                li.appendChild(subUl);
            }

            fragment.appendChild(li);
        });

        return fragment;
    }

    function fetchData() {
        fetch('http://127.0.0.1:8101/sys/sysPermission/getAllMapList')
            .then(response => {
                if (!response.ok) throw new Error("请求失败");
                return response.json();
            })
            .then(data => {
                const ul = document.getElementById("result");
                ul.innerHTML = ""; // 清空旧内容
                const menuFragment = createMenuItems(data);
                ul.appendChild(menuFragment);
            })
            .catch(error => {
                console.error("获取数据失败:", error);
                alert("加载菜单失败，请检查控制台日志");
            });
    }
</script>

</body>
</html>